// 职位详细信息
import * as React from "react";
import "antd/dist/antd.css";
import { Map, Marker } from "react-amap";
import { useParams, Link, useHistory } from "react-router-dom";
import style from "./style.module.css";
import IconFont from "../../assets/icon";
import { ICompany, IRecruit, IUser } from "../../types";
import * as userapi from "../../services/user.services";
import * as recruitapi from "../../services/recruit.services";
import * as companyapi from "../../services/company.services";
import Toast from "../../components/Toast";
import JobItem from "../../components/JobItem";
import RecruitIntroduce from "../../components/RecruitIntroduce";
import CompanyIntroduce from "../../components/CompanyIntroduce";
import CompanyRecruitSearchItem from "../../components/CompanyRecruitSearchItem";
import { useEffect, useState, useCallback } from "react";

const mapKey = "1bda83d516a5a2dac1d89ea7d1544b31";

interface Props {
  id: string;
}

export default function Recruit() {
  const [information, setInformation] = useState<IRecruit>(); //职位信息
  const [author, setAuthor] = useState<IUser>(); //发布人信息
  const [company, setCompany] = useState<ICompany>(); //公司信息
  const [similarjob, setSimilarjob] = useState<IRecruit[]>([]); //相似职位列表
  const [location, setLocation] = useState<string>("1,1"); //地图坐标
  const [size, setSize] = useState<number>(5); //相似职位当前显示条目数量 初始5条
  const [interested, setInterested] = useState<boolean>(); // 是否收藏
  const [isFixed, setIsFixed] = useState<Boolean>(false);
  const params = useParams<Props>();
  const history = useHistory();

  const getData = useCallback(async () => {
    const interest = await userapi.findFav(params.id);
    setInterested(interest.data);
    const result = await recruitapi.recruitDetail(params.id);
    setInformation(result.result);
    const interviewer = await recruitapi.interviewer(
      result.result.interviewerId
    );
    setAuthor(interviewer.data);
    const company = await companyapi.company(interviewer.data.companyId);
    setCompany(company.result);
    const joblist = await recruitapi.similarjob(result.result.positionName);
    setSimilarjob(joblist.result);
    const arrdess = await recruitapi.location(mapKey, result.result.location);
    setLocation(arrdess.data.geocodes[0].location);
  }, [params.id]);

  useEffect(() => {
    getData();
  }, [getData]);

  const changeInterest = async () => {
    const user = await userapi.userInfo();
    if (user.stat === "ERR_NOT_LOGIN") {
      Toast(user.message);
      history.push("/login");
    } else {
      if (interested) {
        await userapi.removeFav(params.id);
      } else {
        await userapi.addFav(params.id);
      }
    }
    getData();
  };

  useEffect(() => {
    window.addEventListener("scroll", handle);
  }, []);

  const handle = () => {
    let bodyTop = document.documentElement.scrollTop;
    if (bodyTop > 150) {
      setIsFixed(true);
    } else {
      setIsFixed(false);
    }
  };

  return (
    <>
      <div className={isFixed ? `${style.topNav} ${style.show}` : style.topNav}>
        <div className={style.topnode}>
          <span className={style.topAvatar}>
            <img src={`/api/article/download/${author?.avatar}`} alt="" />
          </span>
          <div className={style.topRight}>
            <div className={style.topAuthorname}>{author?.name}</div>
            <div className={style.topgray}>
              {company?.companyShortName}-{author?.positionName}
            </div>
          </div>
        </div>
      </div>
      <CompanyRecruitSearchItem />
      <div className={style.main}>
        <RecruitIntroduce information={information} />
        <div className={style.author} id="author">
          <div className={style.avatar}>
            <img src={`/api/user/download/${author?._id}`} className={style.avatar} alt="" />
          </div>
          <div className={style.right}>
            <div className={style.authorname}>
              <span className={style.aname}>{author?.name}</span>
              <span className={style.like} onClick={changeInterest}>
                <IconFont className={style.icon} type="icon-aixin" />
                {interested ? "取消感兴趣" : "感兴趣"}
              </span>
            </div>
            <div className={style.gray}>
              {company?.companyShortName}
              <em className={style.vdot}></em>
              {author?.positionName}
            </div>
          </div>
        </div>
        <div className={style.jobdetail}>
          <div className={style.jobcontent}>
            <h3>职位描述</h3>
            <div className={style.describe}>{information?.describe}</div>
          </div>
          <div className={style.companycontent}>
            <h3>公司介绍</h3>
            <div className={style.companydescribe}>{company?.describe}</div>
            <div className={style.viewmore}>
              <div className={style.liner}></div>
              <Link
                to={"/company/detaile/" + company?._id}
                className={style.complete}
              >
                完整信息
              </Link>
            </div>
          </div>
          <div className={style.location}>
            <h3>工作地址</h3>
            <div className={style.joblocation}>
              <div className={style.arrdess}>
                <IconFont
                  className={style.icon2}
                  type="icon-iconfontzhizuobiaozhun023117"
                />
                {information?.location}
              </div>
              <div style={{ width: "100%", height: "230px" }}>
                <Map
                  amapkey={mapKey}
                  zoom={15}
                  center={[
                    Number(location?.split(",")[0]),
                    Number(location?.split(",")[1]),
                  ]}
                >
                  <Marker></Marker>
                </Map>
              </div>
              <div className={style.locations}></div>
            </div>
          </div>
        </div>
        <CompanyIntroduce company={company} />
        <div className={style.similarjob}>
          <h3>相似职位</h3>
          {similarjob?.map((item, index) => {
            if (index < size) {
              return <JobItem item={item} key={index} />;
            }
            return null;
          })}
          <div className={style.complete} onClick={() => setSize(size + 5)}>
            {size >= similarjob.length ? "没有更多了" : "加载更多"}
          </div>
        </div>
      </div>
    </>
  );
}
